<template>
  <div class="hello">
  		<div class="loading" v-if="status=='loading'">
  			<img src="../assets/timg.gif">
  			<p>我正在努力加载哦。。。</p>
  		</div>
  		<div class="wecoming fadeIn" v-if="status=='loaded'">
  			<p>欢迎你</p>
  			<p>小哥哥♡♡♡</p>
  		</div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
  	return {
  		status:'loading'
  	}
  	
  },
  created() {
  		setTimeout(() =>{
  			this.status='loaded'
  		},3000)
  }
}
</script>
<style type="text/css">
	.fadeIn{
		-webkit-animation:fadeInLeftBig 1s .2s ease both;
		-moz-animation:fadeInLeftBig 1s .2s ease both;
	}
	@-webkit-keyframes fadeInLeftBig{
		0%{opacity:0;
		-webkit-transform:translateX(-2000px)}
		100%{opacity:1;
		-webkit-transform:translateX(0)}
	
	}
	@-moz-keyframes fadeInLeftBig{
		0%{opacity:0;
		  -moz-transform:translateX(-2000px)
		}
		100%{
			opacity:1;
		    -moz-transform:translateX(0)
		}
	}
</style>
<style type="text/css" scoped lang="less">
	.loading{
		text-align: center;
		margin:3.5rem auto;
		position: relative;
		img{
			width:70%;
		}
		p{
			color: #fff;
			width: 100%;
			margin-left: -50%;
			font-size:0.16rem;
			position: absolute;
			left: 50%;
			bottom:0.5rem;
		}
	}
	.wecoming{
		margin:4rem auto;
		p{
			font-size: 0.48rem;
			color: #fff;
			padding-left:2rem;
		}
	}
</style>